<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="simpleBar">
            <el-form-item  label="最大宽度">
              <el-input-number v-model="simpleBar.barMaxWidth" :min="0" :max="100" size="mini"/>
            </el-form-item>
            <el-form-item  label="组内间距">
              <el-input v-model="simpleBar.barGap" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="组间间距">
              <el-input v-model="simpleBar.barCategoryGap" size="mini"></el-input>
            </el-form-item>
            <el-divider content-position="center">柱条背景</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="simpleBar.showBackground" :label="true">是</el-radio>
              <el-radio v-model="simpleBar.showBackground" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="类型">
              <el-radio v-model="simpleBar.backgroundStyle.option" label="pure">纯色</el-radio>
              <el-radio v-model="simpleBar.backgroundStyle.option" label="linear">渐变</el-radio>
            </el-form-item>
            <el-form-item label="颜色" v-if="simpleBar.backgroundStyle.option === 'pure'">
              <el-color-picker v-model="simpleBar.backgroundStyle.pure" show-alpha size="small" @active-change="backgroundStylePure"></el-color-picker>
            </el-form-item>
            <el-divider content-position="center" v-if="simpleBar.backgroundStyle.option === 'linear'">起始点</el-divider>
            <el-form-item  label="横坐标" v-if="simpleBar.backgroundStyle.option === 'linear'">
                <el-input-number v-model="simpleBar.backgroundStyle.linear.x" :min="0" :max="1" size="mini"/>
            </el-form-item>
            <el-form-item  label="纵坐标" v-if="simpleBar.backgroundStyle.option === 'linear'">
                <el-input-number v-model="simpleBar.backgroundStyle.linear.y" :min="0" :max="1" size="mini"/>
            </el-form-item>
            <el-divider content-position="center" v-if="simpleBar.backgroundStyle.option === 'linear'">终止点</el-divider>
            <el-form-item  label="横坐标" v-if="simpleBar.backgroundStyle.option === 'linear'">
                <el-input-number v-model="simpleBar.backgroundStyle.linear.x2" :min="0" :max="1" size="mini"/>
            </el-form-item>
            <el-form-item  label="纵坐标" v-if="simpleBar.backgroundStyle.option === 'linear'">
                <el-input-number v-model="simpleBar.backgroundStyle.linear.y2" :min="0" :max="1" size="mini"/>
            </el-form-item>
            <el-form-item label="起始色" v-if="simpleBar.backgroundStyle.option === 'linear'">
              <el-color-picker v-model="simpleBar.backgroundStyle.linear.colorStops[0].color"  @active-change="backgroundStyleLinearStart" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="终止色" v-if="simpleBar.backgroundStyle.option === 'linear'">
              <el-color-picker v-model="simpleBar.backgroundStyle.linear.colorStops[1].color"  @active-change="backgroundStyleLinearEnd" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-divider content-position="center">柱条圆角</el-divider>
            <el-form-item  label="左上">
              <el-input-number v-model="simpleBar.itemStyle.barBorderRadius[0]" :min="0" :max="100" size="mini"/>
            </el-form-item>
            <el-form-item  label="右上">
              <el-input-number v-model="simpleBar.itemStyle.barBorderRadius[1]" :min="0" :max="100" size="mini"/>
            </el-form-item>
            <el-form-item  label="右下">
              <el-input-number v-model="simpleBar.itemStyle.barBorderRadius[2]" :min="0" :max="100" size="mini"/>
            </el-form-item>
            <el-form-item  label="左下">
              <el-input-number v-model="simpleBar.itemStyle.barBorderRadius[3]" :min="0" :max="100" size="mini"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    backgroundStylePure (val) {
      this.simpleBar.backgroundStyle.pure = val
    },
    backgroundStyleLinearStart (val) {
      this.simpleBar.backgroundStyle.linear.colorStops[0].color = val
    },
    backgroundStyleLinearEnd (val) {
      this.simpleBar.backgroundStyle.linear.colorStops[1].color = val
    }
  },
  computed: {
    simpleBar () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.simpleBar
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
